<template>
	<view class="m30">
		<view class="bgFff search-box flex-jus p10 pore">
			<u-search placeholder="搜索" v-model="keyword" :focus="focus" clearabled bgColor="#fff" :showAction="false"
				@search="enterSearch" @clear="clearData" @change="keywordChange" @focus="keywordChange"></u-search>
			<view class="p20 text-list" v-if="textList.length > 0">
				<view class="f28 c343 textoverflow text-item" v-for="(item,index) in textList" :key="index"
					@click="titleClick(item)">{{item}}</view>
			</view>
		</view>
		<view class="history mt20" v-if="historyList.length > 0">
			<view class="flex-jus">
				<text class="f28 c343 bold">历史搜索</text>
				<view @click="delHistory">
					<u-icon name="trash" color="#34314F" size="20"></u-icon>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view class="flex flex-wrap">
				<view class="history-item" v-for="(item,index) in historyList" :key="index">
					<u-button shape="circle" color="#FEEAD7" size="mini" @click="historyItemclick(item)"
						:customStyle="{'height':'50rpx','color':'#34314F'}">{{item}}</u-button>
				</view>
			</view>
		</view>
		<view class="" v-if="navList.length > 0">
			<view class="flex mt20">
				<scroll-view :scroll-x="true"  :scroll-with-animation="true">
					<u-tabs :list="navList" :current="navIndex" swipeable="true" keyName="name" @click="navClick" lineColor="#FFDE6D"
						lineHeight="8" lineWidth="25" :activeStyle="{
						color: '#34314F',
						fontWeight: 'bold'
					}"></u-tabs>
				</scroll-view>
			</view>
			<u-gap height="10"></u-gap>
			<view v-if="navList[navIndex].value == 'jz'">
				<goods-list v-if="navList[navIndex].data.length > 0" :dataArray="navList[navIndex].data"></goods-list>
			</view>
			<view v-if="navList[navIndex].value == 'ms'">
				<food-list v-if="navList[navIndex].data.length > 0" :dataArray="navList[navIndex].data"></food-list>
			</view>
			<view v-if="navList[navIndex].value == 'ly'">
				<waterfall-flow v-if="navList[navIndex].data.length > 0"
					:dataArray="navList[navIndex].data"></waterfall-flow>
			</view>
			<view v-if="navList[navIndex].value == 'bs'">
				<things-list v-if="navList[navIndex].data.length > 0" :dataArray="navList[navIndex].data"></things-list>
			</view>
			<view v-if="navList[navIndex].value == 'tg'">
				<view class="tuangou" @click="nologinJump('/groupPurchase/detail/index?id=' + item.id)" v-for="(item,index) in navList[navIndex].data" :key="index">
					<view style="display: flex;flex-direction: column;">
						<image :src="api_host+item.icon"
							style="width: 227rpx;height: 227rpx;border-radius: 15rpx;z-index: 99;">
						</image>
						<view class="ms_djs flex f24" v-if="item.goodsSeckill">
							<view class="mt10 ml10" style="color: #78768A;">距结束</view>
							<view class="f24 mt10">
								<count-down :times="item.goodsSeckill.downTimes"></count-down>
							</view>
						</view>
					</view>
					<image src="../../groupPurchase/static/images/qwbj.png"
						style="width: 120rpx;height: 40rpx;position: absolute;top: 30rpx;left: 30rpx;z-index: 100;"></image>
					<view class="flex1">
						<view class="textoverflow" style="width: 400rpx;">
							<text class="f32 fw500 ml20">{{item.brand}} | {{item.goodName}}
							</text>
						</view>
						<view class="f24 mt30 ml20 c999">{{item.goodName}}</view>
						<view class="f24 ml20 mt10 flex flex-wrap">
							<view class="mr10 mb10" v-for="(item2,index2) in transformTags(item.goodEmployValues)" :key="index2">
								<u-tag shape="circle" size="mini" color="#34314F" bgColor="#f7f7f7" :text="item2"
									borderColor="#f7f7f7"></u-tag>
							</view>
						</view>
						<view class="box_bot flex-jus ml20">
							<view class="ml20">
								<view>
									<span class="cff7 f28">￥</span>
									<span class="cff7 f36 fw500" v-if="item.goodsSeckill">{{item.goodsSeckill.price}}</span>
									<span class="cff7 f36 fw500" v-else>{{item.salePrice}}</span>
									<span style="text-decoration: line-through"
										class="f24 ml10 c999">￥{{item.originalPrice}}</span>
								</view>
								<view class="f24 flex cff7">
									<image src="../../groupPurchase/static/images/lisheng.png" style="width: 24rpx;height: 24rpx;">
									</image>
									<text
										v-if="item.goodsSeckill">立省￥{{(item.originalPrice - item.goodsSeckill.price) | toFixed2}}</text>
									<text v-else>立省￥{{(item.originalPrice - item.salePrice) | toFixed2}}</text>
									<text class="ml10">已售{{item.saleVolume}}</text>
								</view>
							</view>
							<view class="box_bot_right flex-cen">
								<image src="../../groupPurchase/static/images/box_bg.png"
									style="width: 130rpx;height: 110rpx;position: absolute;right: 0;"></image>
								<image src="../../groupPurchase/static/images/qiang.png" class="mr10"
									style="width: 42rpx;height: 50rpx;z-index: 99;">
								</image>
								<image class="mr10" src="../../groupPurchase/static/images/right.png" mode="widthFix"
									style="width: 28rpx;z-index: 99;">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 岗位 -->
			<view v-if="navList[navIndex].value == 'gw'">
				<post-list v-if="navList[navIndex].data.length > 0" :dataArray="navList[navIndex].data"></post-list>
			</view>
			<!-- 招聘会 -->
			<view v-if="navList[navIndex].value == 'zph'">
				<career-fair v-if="navList[navIndex].data.length > 0" :dataArray="navList[navIndex].data"></career-fair>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryTitle,
		searchAllsite
	} from '@/common/api_user.js'
	import waterfallFlow from '@/components/waterfall-flow/index.vue'
	import goodsList from '@/components/goodsList/index.vue'
	import foodList from '@/components/foodList/index.vue'
	import thingsList from '@/components/thingsList/index.vue'
	import postList from '@/components/postList/index.vue'
	import careerFair from '@/components/careerFair/index.vue'
	// import menuTabs from '@/components/menuTabs/index.vue'
	export default {
		name: '',
		components: {
			waterfallFlow,
			goodsList,
			foodList,
			thingsList,
			postList,
			careerFair,
			// menuTabs
		},
		data() {
			return {
				showTextlist: false,
				textList: [],
				type: '',
				queryType: '',
				keyword: '',
				focus: false,
				navIndex: 0,
				navList: [],
				historyList: []
			}
		},
		onLoad(option) {
			this.type = option.type
			this.historyList = uni.getStorageSync('historyList') ? JSON.parse(uni.getStorageSync('historyList')) : []
		},
		onReady() {
			this.focus = true
		},
		filters: {
			toFixed2(val) {
				return Number(val).toFixed(2)
			}
		},
		methods: {
			navClick(item) {
				this.navIndex = item.index
			},
			clearData() {
				this.navList = []
				this.closeTextlist()
			},
			delHistory() {
				this.historyList = []
				uni.removeStorageSync('historyList')
			},
			closeTextlist() {
				this.textList = []
				//this.showTextlist = false
			},
			keywordChange(val) {
				console.log(113);
				if (!this.keyword || this.queryType == 'history') {
					this.closeTextlist()
					return false
				}
				this.getQueryTitle()
			},
			async getQueryTitle() {
				const res = await queryTitle({
					value: this.keyword
				})
				if (res.code == 200) {
					this.textList = res.data
				}
			},
			enterSearch() {
				if (!this.keyword) {
					this.clearData()
					uni.showToast({
						title: '请输入关键词搜索',
						icon: 'none'
					})
					return false
				}
				this.closeTextlist()
				if (this.historyList.length < 10) {
					let hasText = false
					hasText = this.historyList.some(item => item == this.keyword)
					if (!hasText) {
						this.historyList.push(this.keyword)
					}
					uni.setStorageSync('historyList', JSON.stringify(this.historyList))
				}
				this.getListdata()
			},
			titleClick(item) {
				this.keyword = item
				this.queryType = 'history'
				this.enterSearch()
				this.getListdata()
			},
			historyItemclick(item) {
				this.keyword = item
				this.queryType = 'history'
				this.getListdata()
			},
			transformTags(goodEmployValues) {
				return goodEmployValues ? goodEmployValues.split(',') : []
			},
			async getListdata() {
				const that = this
				this.navList = []
				setTimeout(() => {
					this.queryType = ''
				}, 1000)
				const res = await searchAllsite({
					value: this.keyword
				})
				if (res.code == 200) {
					//that.keyword = ''
					that.textList = []
					const {
						homeProducts,
						storeInfos,
						userVlogs,
						zoneMatters,
						goodsInfos,
						careerFairs,
						companyStations
					} = res.data
					let storeInfosList = []
					storeInfosList = storeInfos.map(item => {
						return {
							...item,
							imgs: item.images ? item.images.split(',') : []
						}
					})
					if (this.type == 'wan') {
						this.navList = [{
								name: '旅游',
								value: 'ly',
								data: userVlogs
							},
							{
								name: '家政',
								value: 'jz',
								data: homeProducts
							},
							{
								name: '美食',
								value: 'ms',
								data: storeInfosList
							},
							{
								name: '办事',
								value: 'bs',
								data: zoneMatters
							},
							{
								name: '团购',
								value: 'tg',
								data: goodsInfos
							}
						]
					} else if (this.type == 'food') {
						this.navList = [{
								name: '美食',
								value: 'ms',
								data: storeInfosList
							},
							{
								name: '旅游',
								value: 'ly',
								data: userVlogs
							},
							{
								name: '家政',
								value: 'jz',
								data: homeProducts
							},
							{
								name: '办事',
								value: 'bs',
								data: zoneMatters
							},
							{
								name: '团购',
								value: 'tg',
								data: goodsInfos
							}
						]
					} else if (this.type == 'thing') {
						this.navList = [{
								name: '办事',
								value: 'bs',
								data: zoneMatters
							},
							{
								name: '美食',
								value: 'ms',
								data: storeInfosList
							},
							{
								name: '旅游',
								value: 'ly',
								data: userVlogs
							},
							{
								name: '家政',
								value: 'jz',
								data: homeProducts
							},
							{
								name: '团购',
								value: 'tg',
								data: goodsInfos
							}
						]
					} else {
						this.navList = [{
								name: '团购',
								value: 'tg',
								data: goodsInfos
							},
							{
								name: '家政',
								value: 'jz',
								data: homeProducts
							},
							{
								name: '美食',
								value: 'ms',
								data: storeInfosList
							},
							{
								name: '旅游',
								value: 'ly',
								data: userVlogs
							},
							{
								name: '办事',
								value: 'bs',
								data: zoneMatters
							},
							{
								name: '岗位',
								value: 'gw',
								data: companyStations
							},
							{
								name: '招聘会',
								value: 'zph',
								data: careerFairs
							}
						]
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.history-item {
		margin: 1%;
	}

	.search-box {
		border-radius: 50rpx;
	}

	.text-list {
		position: absolute;
		top: 100rpx;
		width: 100%;
		left: 0;
		height: 80vh;
		background-color: #fef4e8;

		.text-item {
			padding: 20rpx 0;
			border-bottom: 1px solid #EEE4DB;
		}
	}

	.tuangou {
		width: 688rpx;
		min-height: 335rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		margin-top: 20rpx;
		position: relative;
	}
	
	.box_bot {
		width: 381rpx;
		height: 110rpx;
		border-radius: 42rpx;
		background: #FFF6F0;
		padding: 20rpx 0;
		box-sizing: border-box;
		position: relative;
	
		.box_bot_right {
			// width: 124rpx;
			height: 110rpx;
			border-radius: 0 42rpx 42rpx 0;
			// background: #FF7C16;
		}
	}
</style>